<div class="eshop">
    <div class="eshop-top">
        <!--    左边订单部分-->
        <div class="order-form " id="content">
            <div class="order-content">

                <div class="order-content-top" id="top">
                    <div class="order-table-id"><strong>{{vm.tableId}}号桌</strong>

                        <div class="right">
                            <img src="images/change-table.png" style="width:0.4rem" ui-sref="order-table">
                        </div>
                    </div>
                    <div class="menu-name">单号：1268</div>
                    <div style="font-size: 12px">订单编号：{{vm.timestamp}}
                        <div class="glyphicon glyphicon-trash right" ng-if="vm.ordergoods.length !=0"
                             ng-click="vm.showRemove()">

                        </div>
                    </div>
                </div>

                <!--所选菜品及其操作-->
                <div class="order-content-center">
                    <hr>
                    <img src="images/order.png" class="order-img" ng-show="vm.ordergoods.length == 0">

                    <div ng-hide="vm.ordergoods.length == 0" style="position: absolute">
                        <!--所选菜品-->
                        <div style="overflow-y:scroll " id="center">
                            <ul class="order-list">
                                <li ng-repeat="good in vm.ordergoods">
                                    <div class="order-list-left"> {{good.title}}{{good.goodsName}} </div>
                                    <div class="order-list-right">

                                        <div style="position: relative;">
                                            <div class="order-num" ng-if="good.num >1">{{good.num}}</div>
                                            <span>{{good.price}}{{good.fee}}</span>
                                            <img src="images/goods-delete.png" ng-click="vm.removeGood(good,$index)"
                                                 ng-show="vm.tr">
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>


                        <div id="bottom" class="order-list-bottom">
                            <hr>
                            <div style="height: 0.3rem">
                                <span>人数</span>
                                <span class="right">5</span>
                            </div>
                            <hr>
                            <div class="order-beizhu">
                                备注
                            </div>
                            <hr>
                            <div style="height: 0.3rem;text-align: right"> {{vm.price| number:2}</div>
                            <div class="order-sure" ng-click="vm.placeOrder()">下单</div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <!--   右边菜单列表部分-->
        <div class="order-menu">
            <div class="menu-top-left">
                <ul class="nav nav-pills table-daohang-left" role="tablist">
                    <li role="presentation" ng-class="{'active':$index==0}" ng-repeat="tablelist in vm.tablesList ">
                        <a href="#{{tablelist.groupid}}" aria-controls="{{tablelist.groupid}}" role="tab" data-toggle="tab">{{tablelist.name}}</a>
                    </li>
                </ul>
            </div>
            <div class="table-daohang-right">
                <div>
                    <label><span>全部<input type="radio" name="type" value="2" checked="checked"
                                          ng-click="vm.test()"></span></label>
                    <label><span>待客<input type="radio" name="type" value="1" ng-click="vm.test(1)"></span></label>
                    <label><span>空桌<input type="radio" name="type" value="0" ng-click="vm.test(0)"></span></label>
                    <label><span>清桌<input type="radio" name="type" value="3" ng-click="vm.test(3)"></span></label>
                </div>
            </div>

            <!-- Nav tabs -->
            <!--   Tab panes -->
            <div class="tab-content menu">
                <div role="tabpanel" class="table-center_order  tab-pane " ng-class="{'active':$index==0}"
                     ng-repeat="tablelist in vm.tablesList" id="{{tablelist.groupid}}"
                     ng-init="vm.setUlStyle(tablelist,21)">

                    <ul style="height: 100%">
                        <li ng-repeat="table in tablelist.tables | filter:{status:vm.key}"
                            ui-sref="order({stid:table.stid})">
                            <div class="table-zhu" ng-class="{0: 'zhu-color_01', 1: 'zhu-color_02'}[table.status]">
                            </div>
                            <div class="table-text">
                                <div class="table-size_1 table-ziti"
                                     ng-class="{1: 'table-color_1', 0: 'table-color_2'}[table.status]"> {{table.stid}}</div>
                                <div ng-show="table.status==0">
                                    <div class=" table-size_2 table-ziti"> 空桌</div>
                                    <div class="table-size_3"> EMPTY</div>
                                </div>
                                <div ng-show="table.status==1">
                                    <div class=" table-size_2 table-ziti"> ¥120 </div>
                                    <div class="table-size_3"> 待客桌...</div>
                                </div>
                            </div>
                            <div class="table-text-bottom" ng-show="table.status==1">
                                <img src="images/watch-icon.png" class="table-img">
                                <span class="table-span">20min</span>
                            </div>
                        </li>
                    </ul>

                </div>
            </div>

        </div>

    </div>
    <div class="eshop-bottom">
        <span>返回|</span>
    </div>
</div>



